<template>
  <el-dialog v-model="showExcel" title="上传Excel数据" width="30%" :destroy-on-close="true">
    <span class="upload">
      <!-- 上传组件 -->
      <el-button class="btn-upload" plain :loading="loading" @click="handelUpload">
        <el-icon :size="40">
          <plus></plus>
        </el-icon>
      </el-button>
      <input class="excel-upload-input" ref="excelUploadInput" type="file" accept=".xlsx, .xls"
        @change="handelChange" />
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showExcel = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script  lang="ts"  setup>
import { ref } from 'vue'
import XLSX, { read } from 'xlsx'
import { getHeaderRow, transition } from './utils'
const props = defineProps({
  excelConfig: {
    type: Object,
    required: true,
  },
  // 文件上传之前的回调
  beforeUpload: {
    type: Function,

  },

})
const emit = defineEmits(['onSuccess'])

const showExcel = ref(false)
const excelUploadInput = ref()
const loading = ref(false)

const confirm = () => {
  emit('confirm')
}

const handelUpload = () => {
  excelUploadInput.value.click()
}
const handelChange = (e: any) => {
  // 获取到文件
  const file = e.target.files[0]
  if (!file) return
  upload(file)
}
// 解析文件
const upload = (file: any) => {
  // console.log(file)
  excelUploadInput.value.value = null
  // 用户不指定上传前的回调 直接解析
  if (!props.beforeUpload) {
    readData(file)
    return
  }
  // 用户指定上传前的回调 回调为true解析
  const before = props.beforeUpload(file)
  if (before) {
    readData()
  }
}
//解析数据
const readData = (file?: any) => {
  loading.value = true
  return new Promise<void>((resolve, reject) => {
    const reader = new FileReader()
    //读取数据
    reader.onload = (e) => {
      //1. 获取到解析的数据
      const data = e.target!.result
      //2. 利用XLSX解析数据
      const workbook = XLSX.read(data, { type: 'array' })
      //3. 获取第一张表格
      const firstSheetNames = workbook.SheetNames[0]
      //4. 读取第一张表格数据
      const workSheet = workbook.Sheets[firstSheetNames]
      // 5. 解析数据表头
      const header = getHeaderRow(workSheet)
      //6. 解析数据体\
      const results = XLSX.utils.sheet_to_json(workSheet)
      // 7. 传入解析之后的数据
      generateData({ header, results })
      // 8. 处理loading
      loading.value = false
      // 9 成功回调
      resolve()
    }
    reader.readAsArrayBuffer(file)
  })
}
//触发 回调事件
const generateData = (excelData: any) => {
  // console.log(props.excelConfig);
  // console.log(excelData);

  emit('onSuccess', transition(excelData.results, props.excelConfig))
}

defineExpose({
  showExcel
})
</script>

<style lang="less" scoped>
.upload {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.excel-upload-input {
  width: 0;
}

.upload {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-upload {
  display: inline-block;
  margin: 0 auto;
  width: 180px;
  height: 150px;
  border: 1px dotted #4d78cc;
}
</style>
